<script setup lang="ts">
import Menus from '@/components/menus.vue'
import UserHeader from "@/components/userHeader.vue";
import {Fold, Expand} from "@element-plus/icons-vue";
import {computed, ref} from "vue";
import closedMenuIcon from "@/components/icons/closedMenuIcon.vue";
import openMenuIcon from "@/components/icons/openMenuIcon.vue";
// xs 小屏手机、sm 智能手机、md PAD、lg PC 和 xl 大屏。
const isCollapse = ref(false);
const collapseClass = computed(() => isCollapse.value ? 'collapse' : '');
const collapseIcon = computed(() => isCollapse.value ? closedMenuIcon: openMenuIcon)
const handleCollapse = () => {
  isCollapse.value = !isCollapse.value;
}
</script>
<template>
  <div class="web-container">
    <div :class="'hidden-sm-and-down left slider  ' + collapseClass">
      <UserHeader :isCollapse="isCollapse"></UserHeader>
      <menus :isCollapse="isCollapse"></menus>
      <div class="left-footer">
        <div class="connect">

        </div>
        <div class="collapse-opt collapse-transition">
          <el-icon @click="handleCollapse" ><component  :is="collapseIcon" /></el-icon>
        </div>
      </div>
    </div>
    <div :class="'right content-wrapper ' + collapseClass">
      <router-view></router-view>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import 'element-plus/theme-chalk/display.css';
@import "../assets/common.less";
.web-container {
  width: 100%;
  height: 100%;
  display: flex;
  left: 0;
  top:0;
  position: absolute;
  .left {
    width: 238px;
    height: 100%;
    .left-footer{
      position: absolute;
      width: 100%;
      bottom: 0;
      .collapse-opt{
        width: 100%;
        align-content: center;
        text-align: center;
        color: #fff;
        font-size: 21px;
      }
    }
  }
  .left.collapse {
    width: @leftCollapseWidth;
  }
  .right {
    background: @mainWhite;
    width: calc(100% - @leftWidth);
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
  }
  .right.collapse{
    width: calc(100% - @leftCollapseWidth);
  }
  @media only screen and (max-width: 991px) {
    .right{
      width: 100%;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }
  }
}
</style>
